<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>捕鱼达人动画</title>
    <style>
        body{
            background: #000;
            text-align: center;
        }
        #c1{
            background:url("img/game_bg_2_hd.jpg") ;
        }
    </style>
</head>
<body>
<canvas id="c1" height="600" width="800"></canvas>
<script src="./js/jquery.js"></script>
<script src="./js/common.js"></script>
<script src="./js/resources.js"></script>
<script src="./js/Spirit.js"></script>
<script src="./js/Fish.js"></script>
<script src="js/Coin.js"></script>
<script src="./js/Bullet.js"></script>
<script src="./js/Button.js"></script>
<script src="js/Cannon.js"></script>
<script>
    window.onload = async function () {

        let oC = $('#c1')[0];
        let W = oC.width,H = oC.height;
        let gd = oC.getContext('2d');
        let imgs;
        try{
            imgs = await loadResources();

        }catch (e) {
            console.log(e)
        }

        let data_bar = __g_resource['bottom'].bottom_bar
        let bottom_bar = new Spirit({
            img:data_bar.img,
            w:data_bar.frame.w,
            h:data_bar.frame.h,
            sx:data_bar.frame.x,
            sy:data_bar.frame.y,
            x:400,
            y:566,
        })
        let cannon = new Cannon(1);

        cannon.x = 442;
        cannon.y = 562;
        //移动炮管方向
        oC.onmousemove = function(e){
            let a = e.offsetX-cannon.x;
            let b = e.offsetY-cannon.y;
            cannon.rotation = Math.atan2(b,a)*180/Math.PI+90
        }

        //开炮
        let bullets = [];
        let last_fire = 0;
        let firing = false;
        oC.onclick = function(e){

            let now = Date.now();
            console.log(now)
            if(now-last_fire<500){
                return
            }
            last_fire = now;
            firing = true;
            let bullet = new Bullet(cannon.type);

            bullet.x = cannon.x;
            bullet.y = cannon.y;
            bullet.rotation = cannon.rotation;
            bullets.push(bullet)
        };

        let btnMenus =  new Button(__g_resource['bottom'].cannon_minus,__g_resource['bottom'].cannon_minus_down);
        let btnPlus =  new Button(__g_resource['bottom'].cannon_plus,__g_resource['bottom'].cannon_plus_down);

        btnMenus.x = 442-50;
        btnMenus.y = 580;

        btnPlus.x = 442+50;
        btnPlus.y = 580;

        oC.onmousedown = function(e){
            let menus = false;
            let plus = false;

            if(btnMenus.checkDown(e.offsetX,e.offsetY)){
                menus = true
            }
            if(btnPlus.checkDown(e.offsetX,e.offsetY)){
                plus = true
            }

            if(menus && cannon.type>1){
                cannon.setType(cannon.type-1)
            }

            if(plus && cannon.type<7){
                cannon.setType(cannon.type+1)
            }
        }

        oC.onmouseup = function(e){
            btnMenus.checkUp(e.offsetX,e.offsetY)
            btnPlus.checkUp(e.offsetX,e.offsetY)
        }
        let fishs = [];
        setInterval(function () {

            if(Math.random()<0.1){
                let fish = new Fish(rndInt(1,6))
                if(Math.random()<0.5){
                    fish.x = -100;
                    fish.y = rndInt(0,H-40);
                    fish.rotation = rnd(70,110);
                    //console.log(fish.y)
                }else {
                    fish.x = W + 100;
                    fish.y = rndInt(0,H-40);
                    fish.rotation =rnd(-110,-70);
                    fish.scaleY = -1;
                    //console.log(fish.y)
                }
                fishs.push(fish)
            }

        },200);

        let coins = []; //金币
        requestAnimationFrame(next);
        function next(){
            //1.清除
            gd.clearRect(0,0,oC.width,oC.height);
            // fish.move();
            // fish.nextFrame();
            //2.移动
            if(firing){
                if(true===cannon.nextFrame()){
                    firing=false;
                }
            }

            bullets.forEach(bullet=>bullet.move())
            fishs.forEach(fish=>fish.move())
            fishs.forEach(fish=>fish.nextFrame(gd))
            coins.forEach(coin=>coin.nextFrame(gd))
            //清除不在可视范围内的对象
           bullets = bullets.filter(bullet=>!bullet.outOfCanvas(W,H))
           fishs = fishs.filter(fish=>!fish.outOfCanvas(W,H))

            //检测碰撞
            fishs.forEach((fish,f_index)=>{
                bullets.forEach((bullet,b_index)=>{
                    if(fish.collTest(bullet)){
                        //消失
                        bullets.splice(b_index, 1);
                        fishs.splice(f_index, 1);

                        //币
                        let coin=new Coin(2);
                        coin.x=fish.x;
                        coin.y=fish.y;

                        coins.push(coin);
                    }
                });
            });

            bottom_bar.draw(gd);
            btnMenus.draw(gd);
            btnPlus.draw(gd);
            bullets.forEach(bullet=>bullet.draw(gd))
            fishs.forEach(fish=>fish.draw(gd))
            coins.forEach(coin=>coin.draw(gd))
            cannon.draw(gd);
            //console.log(fishs.length,bullets.length)
            requestAnimationFrame(next)
        }
    }
</script>
</body>
</html>
